import User from './User.js';
export default {
    props: {},
    data() {
        return {}
    },
    methods: {},
    render(h) {
        return h('div',[
            /**
             * h1 和 hr 以及 User组件 层次平级
             */
            h('h1', '我是parent组件'),
            h('hr'),
            h(User,
                /**
                 * {Object}
                 * 一个与模板中属性对应的数据对象。可选。
                 */
                {
                    props: {
                        text: '我是传入的文本'
                    },
                    attrs: {
                        id: "element_id"
                    },
                    class: {
                        'show': true
                    },
                    style: {
                        background: '#ccc'
                    },
                    // 作用域插槽写在scopedSlots里
                    scopedSlots: {
                        item: props => h('p', `名字为item的作用域插槽。显示数据${JSON.stringify(props)}`),
                        list: props => h('p', `名字为list的作用域插槽。显示数据${JSON.stringify(props)}`)
                    },
                    /**
                     * 这个对于Vue组件没有效果
                     * 1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件
                     * 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click".fn)
                     */
                    on: {
                        click: function () {
                            console.log("绑定了事件")
                        }
                    },
                    /**
                     * 这个本地事件有效果
                     * nativeOn 也是绑定到组件上，但是不需要组件发 $emit，
                     * 它会自动绑定到这个组件的根节点的原生 DOM 上，如果本身就是原生 DOM，直接绑定。
                     */
                    nativeOn: {
                        click: function () {
                            console.log("绑定了事件nativeOn")
                        }
                    },
                },
                /**
                 * {String | Array}
                 * 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
                 * 也可以使用字符串来生成“文本虚拟节点”。可选。
                 */
                [   /**
                     *  User标签下又有如下子标签
                     */
                    h('p', {slot: 'header'}, '这是名字为header的slot'),
                    h('p', '这是填充默认slot数据'),
                    h('p', {slot: 'footer'}, '这是名字为footer的slot'),
                ])
        ]);
    }
}